<template>
  <div class="comments-container">
    <comment-item-top :comment="comment"></comment-item-top>
    <div class="comment-main">
      <comment-item-content :comment="comment"></comment-item-content>
      <comment-item-footer
        :comment="comment"
        :post="post"
        @replyClicked="clickReplyAction(comment.commentId)"
      >
        {{
          commentInputCid == comment.commentId ? "收起回复" : "回复"
        }}</comment-item-footer
      >
      <transition name="h">
        <div class="input-wrapper" v-if="commentInputCid == comment.commentId">
          <comment-input
            @onNewComment="addNewComment"
            :comment="{
              post: comment.post,
              forum: comment.forum,
              parentComment: comment.commentId,
              type: 1,
            }"
          ></comment-input>
        </div>
      </transition>
      <el-divider></el-divider>
      <div
        :id="c.commentId"
        class="reply-item"
        v-for="c in comment.subComments"
        :key="c.commentId"
      >
        <comment-item-top :comment="c"></comment-item-top>
        <comment-item-content :comment="c"></comment-item-content>
        <comment-item-footer
          :comment="c"
          @replyClicked="clickReplyAction(c.commentId)"
          :post="post"
        >
          {{ commentInputCid == c.commentId ? "收起回复" : "回复" }}
        </comment-item-footer>
        <transition name="h">
          <div class="input-wrapper" v-if="commentInputCid == c.commentId">
            <comment-input
              @onNewComment="addNewComment"
              :comment="{
                post: c.post,
                forum: c.forum,
                type: 1,
                parentComment: comment.commentId,
                replyToSub: c.commentId,
              }"
            ></comment-input>
          </div>
        </transition>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import CommentItemTop from "./CommentItemTop.vue";
import CommentItemContent from "./CommentItemContent.vue";
import CommentItemFooter from "./CommentItemFooter.vue";
import CommentInput from "./CommentInput.vue";
export default {
  props: ["comment","post"],
  components: {
    CommentItemTop,
    CommentItemContent,
    CommentItemFooter,
    CommentInput,
  },
  data() {
    return {};
  },
  methods: {
    clickReplyAction(cid) {
      if (cid == this.commentInputCid) this.changeCommentInput(0);
      else this.changeCommentInput(cid);
    },
    addNewComment(c) {
      this.comment.subComments.push(c)
      this.comment.subComments.forEach((c1) => {
          if (c1.commentId == c.replyToSub) {
            this.$set(c, "replyToUser", c1.author);
          }
        });
    } 
  },
  created() {
    this.comment.subComments.forEach((c) => {
      if (c.replyToSub) {
        this.comment.subComments.forEach((c1) => {
          if (c1.commentId == c.replyToSub) {
            this.$set(c, "replyToUser", c1.author);
          }
        });
      }
    });
  },
};
</script>


<style scoped lang="less">
.comments-container {
  .comment-main {
    padding-left: 66px;
  }
}
.h-enter,
.h-leave-to {
  height: 0;
}
.h-enter-active,
.h-leave-active {
  transition: 0.3s linear;
}
.h-leave,
.h-enter-to {
  height: 150px;
}
.input-wrapper {
  overflow: hidden;
}
</style>